<template>
	<view class="goods" @tap="gotoDatail" @longtap="deleteGoods">
		<view class="image-box">
			<!-- 选中状态 -->
			<checkbox v-if="showCheck" :checked="goods.checked" @click.stop='changeChecked' color="#00ff00" />
			<image :src="goods.goods_big_logo || defaultImg" mode="widthFix"></image>
		</view>

		<view class="goods-info">
			<!-- 商品名称 -->
			<view class="goods-name">
				{{goods.goods_name}}
			</view>

			<view class="goods-price-box">
				<!-- 商品价格 -->
				<view class="goods-price">
					￥{{goods.goods_price}}
				</view>
				<!-- 购物车中商品数量 -->
				<view class="goods-num" v-if="vshowNum">
					<view class="num-edit" :class="goods.cartNum==1?'one':''" @tap.stop="numSub">-</view>
					<view class="num">{{goods.cartNum}}</view>
					<view class="num-edit" @tap.stop="numAdd">+</view>
				</view>
				<view class="num-only" v-if="vshowNumDoly" @tap.stop="showNumEdit">x{{goods.cartNum}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hjx-goods",
		data() {
			return {
				defaultImg: '../../static/default_image.png',
				// 用户数量编辑框和x数量的切换
				vshowNum: this.showNum,
				vshowNumDoly: this.showNumDoly
			};
		},
		// props: ['goods'],
		// props:['goods','showCheck','showNum','allowLongTap'],
		props: {
			// 产品的信息
			goods: {
				type: Object,
				default: null
			},
			// 是否显示复选框
			showCheck: {
				type: Boolean,
				default: false
			},
			// 是否显示数量编辑框
			showNum: {
				type: Boolean,
				default: false
			},
			// 是否允许长按进行删除
			allowLongTap: {
				type: Boolean,
				default: false
			},
			// 是否显示 X数量框
			showNumDoly: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 在支付页面点击数量时,显示数量编辑框
			showNumEdit() {			
				this.vshowNumDoly = false;
				this.vshowNum = true;
			},
			// 选中
			changeChecked() {
				this.$emit("changeChecked", {
					goods_id: this.goods.goods_id,
					checked: !this.goods.checked
				})
			},
			// 长按删除
			deleteGoods() {
				if (this.allowLongTap) {
					uni.showModal({
						title: '删除',
						content: '确定删除吗？',
						success: (res) => {
							console.log(res);
							if (res.confirm) {
								this.$emit('changeNum', {
									goods_id: this.goods.goods_id,
									cartNum: 0
								});
							}
						}
					})
				}
			},
			// 单击 -
			numSub() {
				if (this.goods.cartNum > 1) {
					this.$emit('changeNum', {
						goods_id: this.goods.goods_id,
						cartNum: this.goods.cartNum - 1,
					})
				}
			},
			// 单击 +
			numAdd() {
				this.$emit('changeNum', {
					goods_id: this.goods.goods_id,
					cartNum: this.goods.cartNum + 1,
				})
			},

			gotoDatail() {
				uni.navigateTo({
					url: '../../subpkg1/goods-detail/goods-detail?a=' + this.goods.goods_id
				})
			}
		},
	}
</script>

<style lang="scss">
	.goods {
		display: flex;
		padding: 15rpx;
		border-bottom: var(--separateLine);

		.image-box {
			flex: 1;
			display: flex;
			align-items: center;

			image {
				width: 80%;
			}
		}

		.goods-info {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 15rpx;

			.goods-name {
				/**对象作为伸缩盒子模型展示**/
				display: -webkit-box;
				/**设置或检索伸缩盒子对象的子元素的排列方式**/
				-webkit-box-orient: vertical;
				/**显示的行数**/
				-webkit-line-clamp: 2;
				/**隐藏超出的内容**/
				overflow: hidden;
				
			}

			.goods-price-box {
				display: flex;
				justify-content: space-between;
				border: #676767;
				border-radius: 30rpx;

				.goods-price {
					color: #ba0565;
					font-size: 34rpx;
				}

				.goods-num {
					width: 210rpx;
					height: 60rpx;
					display: flex;
					font-size: 36rpx;
					border: 1rpx solid #bababa;
					border-radius: 30rpx;

					.num-edit {
						flex: 1;
						//background-color: #e6e6e6;
						display: flex;
						align-items: center;
						justify-content: center;

						&.one {
							color: #ba0565;
						}

						.num {
							flex: 1;
							display: flex;
							justify-content: center;
							align-items: center;
							border-left: 1rpx solid #bababa;
							border-right: 1rpx solid #bababa;
						}
					}
				}

			}
		}
	}
</style>